<template>
  <div :class="$style.wrapper">
    <component :class="$style.componentWrapper" :is="currentComponent"></component>
  </div>
</template>

<script>
import { mapGetters, mapState } from 'vuex';
/**
 * 若干层
 * 第一层： 集团 PsGlobal
 * 第二层： 基地 PsSection
 * 第三层： 厂区 PsFactory
 * 第四层： 产线 PsProductionLine
 * 第五层： 设备组（可以有多层）
 * 第六层： 设备
 */
import PsGlobal from './../../../default/components/area-state/PsGlobal.vue';
import PsSection from './../../../default/components/area-state/PsSection.vue';
import PsFactory from './../../../default/components/area-state/PsFactory.vue';
import PsProductionLine from './../../../default/components/area-state/PsProductionLine.vue';
import PsDeviceView from '../../components/area-state/PsDeviceView.vue';

const calculateLevel = (resource) => {
  if (!resource) {
    return;
  }
  const domainPath = resource.category === 'Domain' ? resource.domainPath : `${resource.domains}${resource.id}`;
  console.log(domainPath);
  const domainPathObj = domainPath.split('/').filter(item => !!item).reduce((prev, curr, index) => {
    prev[curr] = index - 1;
    return prev;
  }, {});
  const componentArr = [PsGlobal, PsSection, PsFactory, PsProductionLine, PsDeviceView, PsDeviceView];
  return componentArr[domainPathObj[resource.id]];
};
export default {
  name: 'AreaState',
  components: {
    PsGlobal,
    PsSection,
    PsFactory,
    PsProductionLine,
    PsDeviceView
  },
  computed: {
    ...mapGetters('resource', [
      'currentResource',
      'currentResourcePath'
    ]),
    ...mapState('user', [
      'currentUser'
    ]),
    currentComponent () {
      return calculateLevel(this.currentResource);
    }
  }
};
</script>

<style lang="scss" module>
@import './../../../style/default/area-state.scss';
</style>
